import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';

import { Swiper, Toast } from 'antd-mobile';
import { DownOutline, LocationFill, SearchOutline, } from 'antd-mobile-icons'

import { getSwipers, getgroup, getNews } from '../../api/request'
import getlocaltion from '../../utils/getlocaltion';

import styles from './index.module.scss';

import nav1 from './images/nav-1.png';
import nav2 from './images/nav-2.png';
import nav3 from './images/nav-3.png';
import nav4 from './images/nav-4.png';

export default function Home() {
  // 轮播图
  const [imgList, setState] = useState([]);
  // 租房小组
  const [groupList, setgroup] = useState([]);
  // 最新资讯
  const [newsList, setnews] = useState([]);
  // 城市信息
  const [city, setcity] = useState({label:'未知'});

  const navigate = useNavigate();

  const items = imgList.map((item, index) => (<Swiper.Item key={item.id}>
    <div className={styles.content} onClick={() => {
      Toast.show(`你点击了卡片 ${index + 1}`);
    }}>
      <img src={'http://localhost:8080' + item.imgSrc} />
    </div>
  </Swiper.Item>));
  // 轮播图
  const get_swper = async () => {
    const res = await getSwipers()
    setState(res.data.body);
  }
  // 租房小组
  const get_group = async (value) => {
    
    const res = await getgroup(value)
    setgroup(res.data.body);
  }
  // 最新资讯
  const get_news = async (value) => {
    const res = await getNews(value);
    
    setnews(res.data.body);
  }

  // 跳转到地图
  const goMap = () => {
    navigate('/map');
  }

  // 获取当前位置信息
  let get_localtion =async () => {
    let res =await getlocaltion();
    console.log(res);
    get_group(res.value);
    get_news(res.value);
    setcity(res)
  }
  useEffect(() => {
    get_swper();
    get_localtion()
    
   
  }, []);

  return (
    <div>
      <div className={styles.swiper_box}>
        {/* 搜索框 */}
        <div className={styles.search_box}>
          <div className={styles.location} onClick={() => {
           navigate('/citylist');
          }}>
            <span className={styles.location_name}>{city.label}</span>
            <DownOutline />
          </div>
          <div className={styles.search}>
            <SearchOutline fontSize={21} />
            <span>请输入搜索内容</span>
          </div>
          <LocationFill fontSize={22} onClick={goMap} />
        </div>
        <Swiper loop autoplay onIndexChange={i => {
        }}>
          {items}
        </Swiper>

      </div>
      {/* 四个导航选项 */}
      <div className={styles.four_nav}>
        <div className={styles.item}>
          <img src={nav1} />
          <span>整租</span>
        </div>
        <div className={styles.item}>
          <img src={nav2} />
          <span>合租</span>
        </div>
        <div className={styles.item}>
          <img src={nav3} />
          <span>地图找房</span>
        </div>
        <div className={styles.item}>
          <img src={nav4} />
          <span>去出租</span>
        </div>
      </div>
      {/* 租房小组 */}
      <div className={styles.group_box}>
        <div className={styles.group_title}>
          <span className={styles.bigtitle}>租房小组</span>
          <span className={styles.more}>更多</span>
        </div>
        <div className={styles.group_content}>
          {
            groupList.map((item) =>
            (<div className={styles.group_item} key={item.id}>

              <span className={styles.item}>
                <span style={{ fontWeight: '600' }}>{item.title}</span>
                <span style={{ color: 'rgb(146,148,147)', fontSize: '12px' }}>{item.desc}</span>
              </span>
              <img src={`http://localhost:8080${item.imgSrc}`} alt="" />

            </div>)
            )
          }

        </div>
      </div>
      {/* 最新资讯 */}
      <div className={styles.information}>
        <div className={styles.info_title}>
          最新资讯
        </div>
        <div className={styles.info_content}>
          {
            newsList.map((item) => (<div className={styles.info_item} key={item.id}>
              <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
              <div className={styles.info_item_right}>
                <span style={{ fontWeight: 'bold', paddingRight: '8px' }}>{item.title}</span>
                <div className={styles.info_info}>
                  <span className={styles.from}>{item.from}</span>
                  <span className={styles.date}>{item.date}</span>
                </div>
              </div>
            </div>))
          }
        </div>
      </div>
    </div>
  )
}
